<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // DOM  => HTML DOM   => HTML元素的增删改查

    // 节点
    // 文档 元素 属性 文本 注释节点

    // 层级关系
    // 父节点 子节点 同胞节点 根节点


    // 元素节点查找
    // 文档查找
    // document.getElementById()
    // document.getElementsByClassName()
    // document.getElementsByTagName()
    // document.getElementsByName()

    // parent.getElementsByClassName()
    // parent.getElementsByTagName()

    // document.querySelector()
    // document.querySelectorAll()

    // 属性节点
    // document.createAttribute(attrName);
    // Element.getAttributeNode()
    // Element.setAttributeNode()
    // Element.removeAttributeNode()

    // Element.getAttribute()
    // Element.setAttribute()
    // Element.removeAttribute()


    // 层级关系
    // parentNode
    // parentElement

    // childNodes
    // children

    // firstChild
    // firstElementChild
    // lastChild
    // lastElementChild

    // previousSibling
    // previousElementSibling
    // nextSibling
    // nextElementSibling

    // 增
    // document.createElement()
    // document.createTextNode()
    // document.createComment()
    // document.createDocumentFragment()

    // parent.appendChild(node)
    // parent.append(node | string)
    // parent.prepend(node | string)

    // parent.insertBefore(newNode, oldNode);

    // 删除
    // Element.remove()
    // parent.removeChild()

    // 替换
    // parent.replaceChild(newNode, oldNode);

    // 克隆
    // Element.cloneNode(true | false)










</script>

</html>